<template>
  <div class="idadd">
    <el-dialog
      :title="info ? '编辑' : '新增'"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <div>
        <el-form
          :inline="true"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="品牌名称" prop="author">
            <el-input v-model="PmsBrand.name" placeholder="品牌名称"></el-input>
          </el-form-item>
          <el-form-item label="首字母" prop="author">
            <el-input
              v-model="PmsBrand.firstLetter"
              placeholder="首字母"
            ></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="author">
            <el-input v-model="PmsBrand.sort" placeholder="排序"></el-input>
          </el-form-item>
          <el-form-item label="产品数量" prop="author">
            <el-input
              v-model="PmsBrand.productCount"
              placeholder="产品数量"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否展示" prop="author" style="width: 300px">
            <el-switch
              v-model="PmsBrand.showStatus"
              active-color="#409EFF"
              inactive-color="#DCEFE6"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="是否为制造商" prop="author" style="width: 300px">
            <el-switch
              v-model="PmsBrand.factoryStatus"
              active-color="#409EFF"
              inactive-color="#DCEFE6"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="上传专区大图" prop="author">
            <el-upload
              style="
                width: 178px;
                height: 178px;
                margin-left: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
              "
              ref="upload"
              :action="uploadUrl"
              :headers="headers"
              :on-success="handleAvatarSuccess"
            >
              <div
                v-if="PmsBrand.bigPic == ''"
                style="font-size: 30px; padding: 150px"
              >
                ＋
              </div>
            </el-upload>
            <img
              v-if="PmsBrand.bigPic"
              :src="PmsBrand.bigPic"
              style="height: 100px; width: 200px; margin-top: -100px"
              alt=""
            />
          </el-form-item>
          <el-form-item label="上传logo" prop="author">
            <el-upload
              style="
                width: 178px;
                height: 178px;

                display: flex;
                align-items: center;
                justify-content: center;
              "
              ref="upload"
              :action="uploadUrl"
              :headers="headers"
              :on-success="handleAvatarSuccesser"
            >
              <div
                v-if="PmsBrand.logo == ''"
                style="font-size: 30px; padding: 150px"
              >
                ＋
              </div>
            </el-upload>
            <img
              v-if="PmsBrand.logo"
              :src="PmsBrand.logo"
              style="height: 100px; width: 200px; margin-top: -100px"
              alt=""
            />
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="footers">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import product from '@/api/product'
import mixins from '@/mixins'
export default {
  mixins: [mixins],
  data() {
    return {
      info: '',
      dialogVisible: false,
      value: '',
      value1: '',
      PmsBrand: {
        bigPic: '', //专区大图
        datailObj: '',
        factoryStatus: '', //是否为品牌制造商
        firstLetter: '', //首字母
        logo: '', //logo
        name: '', //品牌名称
        productCommentCount: '',
        productCount: '', //产品数量
        showStatus: '', //是否展示
        sort: '', //排序
      },
    }
  },
  created() {},
  mounted() {},
  methods: {
    //子组件的打开方法
    open(data) {
      this.dialogVisible = true

      if (data) {
        console.log(data, 'data')

        this.PmsBrand = data
        this.info = data
        console.log(this.info, 'this.info')
      } else {
      }
    },
    cancel() {
      this.dialogVisible = false
      // this.PmsBrand = ''
    },
    submit() {
      this.dialogVisible = false
      // this.PmsBrand = ''

      if (this.info) {
        product
          .updateBrandApi({
            name: this.PmsBrand.name,
            firstLetter: this.PmsBrand.firstLetter,
            sort: this.PmsBrand.sort,
            productCount: this.PmsBrand.productCount,
            showStatus: this.PmsBrand.showStatus,
            factoryStatus: this.PmsBrand.factoryStatus,
            bigPic: this.PmsBrand.bigPic,
            logo: this.PmsBrand.logo,
            id: this.info.id,
          })
          .then(res => {
            console.log(res, '编辑')
            this.$parent.findBrandByPageApi()
          })
      } else {
        product
          .addBrandApi({
            name: this.PmsBrand.name,
            firstLetter: this.PmsBrand.firstLetter,
            sort: this.PmsBrand.sort,
            productCount: this.PmsBrand.productCount,
            showStatus: this.PmsBrand.showStatus,
            factoryStatus: this.PmsBrand.factoryStatus,
            bigPic: this.PmsBrand.bigPic,
            logo: this.PmsBrand.logo,
          })
          .then(res => {
            console.log(res, 'res')
            this.$parent.findBrandByPageApi()
          })
      }
    },

    handleAvatarSuccess(res) {
      console.log(res, 'resss')
      if (res.success) {
        this.PmsBrand.bigPic = res.data.fileUrl
        // this.$refs.upload.clearFiles()
      } else {
        this.$message.error('上传失败')
      }
    },
    handleAvatarSuccesser(res) {
      console.log(res, 'resss')
      if (res.success) {
        this.PmsBrand.logo = res.data.fileUrl

        // this.$refs.upload.clearFiles()
      } else {
        this.$message.error('上传失败')
      }
    },
  },
}
</script>

<style scoped lang="scss">
.idadd ::v-deep .el-dialog {
  height: 500px !important;
}

.el-input {
  width: 300px;
}
.footers {
  position: relative;
  bottom: 60px;
}
</style>